import React,{Component,PropTypes} from 'react';
import Baselist from 'components/Baselist';
import Crumb from 'components/Crumb'
import OssUpload from "components/OssUpload";

import { Form, Select, Input, Button,Card } from 'antd';
const FormItem = Form.Item;
import API, {} from 'lib/api';
import {redirect,backward} from 'lib/utils.js';
import './style.less';


/*     编辑状态数据模拟    */
import banner from 'images/banner.png';
const initData = {
    title:"首页推荐",
    describe:"首推商品,时限2017-11-26",
    url:"www.zl.cn/edit",
    rank:0,
    img:banner
};


class Add extends Component{
    constructor(props){
        super(props);

        this.state={
            hasImg:true ,       // true ==> 已经上传图片 ==> 关闭错误提示
            crumb:[
                    {href:"/",title:"首页"},
                    {href:"/",title:"轮播图列表"},
                    {href:"/",title:"添加轮播图"},
            ],
        }
    };


    componentDidMount(){
        const {id} = this.props.routeParams;
        if(id){
            // API.fetch("",{id:id},resp=>{
            //     this.setState({ initData:initData })
                this.props.form.setFieldsValue(initData);         // 设置控价默认值

                this.setState({ img:initData.img, hasImg:true }); // 设置图片显示,并去掉图片为空时错误提示
            // })
        }
    }


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }else {
                //  必传图片的错误信息提示,是否显示
                if(err.img){
                    this.setState({hasImg:false})
                }else{
                    this.setState({hasImg:true})
                }
            }
        });
    };


    handlerPic(field){
        this.props.form.setFieldsValue({ img: field });

        // ++ 图片上传操作后,对错误信息提示的处理
        let hasImg = false;
        field ? hasImg = true:null;

        this.setState({ img:field, hasImg:hasImg });
    };


    render(){
        const { getFieldDecorator } = this.props.form;
        const {hasImg} = this.state;
        return(
            <Baselist>
                <Crumb crumb={this.state.crumb}/>
                <Card title="轮播图信息"  className="add_flex-slider" noHovering={true}>
                    <Form onSubmit={this.handleSubmit}>

                        <FormItem label="标题" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                            {getFieldDecorator('title', {
                                rules: [{ required: true, message: '请输入轮播图标题!' }],

                            })(
                                <Input placeholder="请输入轮播图标题"/>
                            )}
                        </FormItem>


                        <FormItem label="描述" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                            {getFieldDecorator('describe', {
                                rules: [{ required: false, message: '' }],
                            })(
                                <Input placeholder="请输入轮播图描述"/>
                            )}
                        </FormItem>



                        <FormItem label="页面地址" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                            {getFieldDecorator('url', {
                                rules: [{ required: false, message: '' }],
                            })(
                                <Input placeholder="请输入轮播图页面地址"/>
                            )}
                        </FormItem>



                        <FormItem label="排序权值" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                            {getFieldDecorator('rank', {
                                rules: [{ required: false, message: '' }],
                            })(
                                <Input placeholder="请输入排序权值"/>
                            )}
                        </FormItem>


                        <FormItem style={{marginBottom:6}}>
                            {getFieldDecorator('img', {
                                rules: [{ required: true, message: ' ' }],
                            })(
                                <OssUpload default={this.state.img}
                                           onFieldSet={this.handlerPic.bind(this)}
                                           multiple={false}
                                           lable="轮播图片"
                                />
                            )}
                        </FormItem>

                        {/*  原有图片上传的必填提示信息,位置不好修改所以另起一行做提示  */}
                        <div className="ant-row ant-form-item oss-upload_elem" style={{visibility:hasImg?"hidden":"visible"}}>
                            <label className="ant-form-item-label ant-col-xs-24 ant-col-sm-4">  </label>
                            <div className="ant-col-8 ant-form-item-control-wrapper" style={{color: "#f04134"}}>请选择图片</div>
                        </div>

                        <FormItem wrapperCol={{ span: 8, offset: 4 }}>
                            <Button type="primary" htmlType="submit">保存</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Baselist>
        )
    }
}


export default Form.create()(Add);